<template>
	<view class="content f fv">
		<view class="top-bar f fac fpj">
			<view class="img" @click="goBack">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view>
			<view class="img" @click="more">
				<image class="more" src="../../static/images/userhome/more.png" mode=""></image>
			</view>
		</view>
		<view class="bg">
			<view class="bg-mask"></view>
			<image class="bg-img" src="../../static/images/img/four.png" mode="aspectFill"></image>
		</view>
		<view class="main f fv fac">
			<view class="avatar">
				<image src="../../static/images/img/four.png"></image>
				<view class="sex f fac fpc">
					<image src="../../static/images/userhome/female.png" mode=""></image>
				</view>
			</view>
			<view class="user-name">微光</view>
			<view class="sign">
				夜，结束了一天短小后安静下老，夜，结束了一天短小后安静下老，夜，结束了一天短小后安静下老，夜，结束了一天短小后安静下老，v，，夜，结束了一天短小后安静下老
			</view>
		</view>
		<view class="paimary-btn">
			<button class="btn">加为好友</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 更多(详细)
			more() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		padding: 0 32rpx;
		// padding-top: var(--status-bar-height);
		.img{
			.back {
				width: 26rpx;
				height: 46rpx;
			}
			.more {
				width: 52rpx;
				height: 12rpx;
			}
		}
	}
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -2;
		.bg-mask {
			width: 100%;
			height: 100%;
			// background-color: red;
		}
		.bg-img {
			opacity: 0.4;
			width: 110%;
			height: 110%;
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			filter: blur(16rpx);
			z-index: -1;
		}
	}
	.main {
		margin-top: 148rpx; // 88 + 60 = 148
		.avatar {
			width: 400rpx;
			height: 400rpx;
			border: 3px solid #fff;
			border-radius: 48rpx;
			overflow: hidden;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.sex {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				width: 64rpx;
				height: 64rpx;
				background-color: #FF5D5B;
				border-radius: 100%;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.user-name {
			margin-top: 48rpx;
			font-size: 42rpx;
			color: $uni-text-color;
		}
		.sign {
			margin-top: 28rpx;
			width: 552rpx;
			font-size: 24rpx;
			color: $uni-text-color-opacity;
		}
	}
	.paimary-btn {
		width: 100%;
		height: 104rpx;
		position: fixed;
		bottom: 0;
		padding: 0 32rpx;
		.btn {
			width: 100%;
			height: 80rpx;
			background-color: $uni-color-primary;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}
	}
}
</style>
